<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">
	<style>
		p {
			margin: 0
		}
	</style>
</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">文字排版</h5>
				<p>Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。</p>
				<p>默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。</p>
			</div>
			<div class="card-body">
				<div class="mt-2">
					<h1>h1 标题 (2.5rem = 40px)
						<small>副标题</small>
					</h1>
					<h2>h2 标题 (2rem = 32px)
						<small>副标题</small>
					</h2>
					<h3>h3 标题 (1.75rem = 28px)
						<small>副标题</small>
					</h3>
					<h4>h4 标题 (1.5rem = 24px)
						<small>副标题</small>
					</h4>
					<h5>h5 标题 (1.25rem = 20px)
						<small>副标题</small>
					</h5>
					<h6>h6 标题 (1rem = 16px)
						<small>副标题</small>
					</h6>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">文本颜色</h5>
			</div>
			<div class="card-body">
				<p class="text-muted">柔和的文本。</p>
				<p class="text-primary">重要的文本。</p>
				<p class="text-success">执行成功的文本。</p>
				<p class="text-info">代表一些提示信息的文本。</p>
				<p class="text-warning">警告文本。</p>
				<p class="text-danger">危险操作文本。</p>
				<p class="text-secondary">副标题。</p>
				<p class="text-dark">深灰色文字。</p>
				<p class="text-light bg-secondary">浅灰色文本（白色背景上看不清楚）。</p>
				<p class="text-white bg-secondary">白色文本（白色背景上看不清楚）。</p>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">链接中使用的文本颜色</h5>
			</div>
			<div class="card-body">
				<a href="#" class="text-muted">柔和的链接。</a>
				<a href="#" class="text-primary">主要链接。</a>
				<a href="#" class="text-success">成功链接。</a>
				<a href="#" class="text-info">信息文本链接。</a>
				<a href="#" class="text-warning">警告链接。</a>
				<a href="#" class="text-danger">危险链接。</a>
				<a href="#" class="text-secondary">副标题链接。</a>
				<a href="#" class="text-dark">深灰色链接。</a>
				<a href="#" class="text-light bg-secondary">浅灰色链接。</a>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">文本背景颜色</h5>
			</div>
			<div class="card-body">
				<p class="bg-primary text-white">重要的背景颜色。</p>
				<p class="bg-success text-white">执行成功背景颜色。</p>
				<p class="bg-info text-white">信息提示背景颜色。</p>
				<p class="bg-warning text-white">警告背景颜色</p>
				<p class="bg-danger text-white">危险背景颜色。</p>
				<p class="bg-secondary text-white">副标题背景颜色。</p>
				<p class="bg-dark text-white">深灰背景颜色。</p>
				<p class="bg-light text-dark">浅灰背景颜色。</p>
			</div>
		</div>
	</section>
</body>

</html>